<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>html5</title>
    <link rel="stylesheet" href="css/public/base.css">
    <link rel="stylesheet" href="css/html5.css">
</head>
<body>
<header id="headerWrap"></header>

<section id="content" class="html5">
    <h1 class="article_title">html5</h1>
    <h3>html5 input types:</h3>
    <ul class="list">
        <li><em>color</em><input type="color" value="#66cccc"></li>
        <li><em>email</em><input type="email" value="some@email.com" autofocus></li>
        <li><em>date</em><input type="date" min="2013-01-01" max="2013-12-31" value="2013-01-01"></li>
        <li><em>month</em><input type="month"></li>
        <li><em>week</em><input type="week"></li>
        <li><em>time</em><input type="time" step="900"></li>
        <li><em>datetime</em><input type="datetime" required="required"></li>
        <li><em>datetime-local</em><input type="datetime-local"></li>
        <li><em>number</em><input type="number" name="html5number" min="1" max="10" step="1" value="1"></li>
        <li><em>range</em><input type="range" name="html5range" min="-100" max="100" value="0" step="10"></li>
        <li><em>search</em><input type="search" results="10" placeholder="Search..." ></li>
        <li><em>tel</em><input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$"></li>
        <li><em>url</em><input type="url"></li>
        <li>&nbsp;</li>
        <li><em>placeholder</em><input type="text" name="html5placeholder" placeholder="This Will Show in WebKit"></li>
        <li><em>Input Pattern</em><input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"></li>
        <li><em>Multiple Files</em><input type="file" name="html5multiplefileupload" multiple></li>
        <li><em>List</em>
            <input type="text" name="html5textwithdatalist" list="colors">
            <datalist id="colors">
                <option value="Red">
                <option value="Green">
                <option value="Blue">
            </datalist></li>

    </ul>
    <hr>
    <h3>Audio & Video</h3>
    <ul class="list">
        <li>
            <audio controls>
                <source src="resource/周杰伦-蒲公英的约定.mp3">
            </audio>
        </li>
        <li>
            <video width="680" height="450" controls preload="none" poster=" ">
                <source src="resource/中島美嘉 - LOVE IS ECSTASY.mp4" type="video/mp4">
            </video>
            <script>
                var video = document.getElementsByTagName('video')[0];
                function toggleMute() {
                    video.muted = !video.muted;
                }
            </script>
            <p>
                <a href="javascript:video.play();">Play</a> |
                <a href="javascript:video.pause();">Pause</a> |
                <a href="javascript:toggleMute();">Sound On/Off</a>
            </p>


        </li>
    </ul>
    <hr>
    <h3>Canvas </h3>
    <script type="text/javascript">
        function draw(){
            var canvas = document.getElementById('mycanvas');
            if (canvas.getContext){
                var ctx = canvas.getContext('2d');
// Draw Rectangle
                ctx.fillStyle = "rgb(255,0,0)";
                ctx.fillRect (10, 10, 100, 100);
// Draw Circle
                ctx.fillStyle = "rgb(0,255,0)";
                ctx.beginPath();
                ctx.arc(125,100,50,0,Math.PI*2,true);
                ctx.fill();
                ctx.closePath();
// Draw Custom Shape With Lines
                ctx.fillStyle = "rgb(0,0,255)";
                ctx.beginPath();
                ctx.moveTo(125,100);
                ctx.lineTo(175,50);
                ctx.lineTo(225,150);
                ctx.fill();
                ctx.closePath();
// Draw Image From External File
                var myImage = new Image();
                myImage.onload = function(){
                    ctx.drawImage(myImage, 220, 10);
                }
                myImage.src = "sample.jpg";
            }
        }
    </script>

    <figure>
        <canvas id="mycanvas" width="300" height="200">Fallback content, in case
            the browser does not support Canvas.</canvas>
        <figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera
            9.6+)</figcaption>
    </figure>

    <canvas id="myCanvas2">your browser does not support the canvas tag </canvas>

    <script type="text/javascript">

        var canvas=document.getElementById('myCanvas2');
        var ctx=canvas.getContext('2d');
        ctx.fillStyle='#FF0000';
        ctx.fillRect(0,0,80,100);

    </script>
    <hr>
    <h3>ContentEditable</h3>
    <script>
        function editStyle(cmd) {
            document.execCommand(cmd, null, null);
        }
    </script>

    <div id="editingcontrols">
        <a href="javascript:void(0)" onclick="editStyle('bold');">[Bold]</a>
        <a href="javascript:void(0)" onclick="editStyle('italic');">[Italic]</a>
        <a href="javascript:void(0)" onclick="editStyle('underline');">[Underline]</a>
    </div>
    <div id="editor" contenteditable="true">
        <h2>HTML5 Standardized Content Editing</h2>
        <p>Thanks to Microsoft; HTML elements are editable since Internet
            Explorer 5.5....</p>
        <p>To edit just start typing. To change style, select text and click
            on links in the tools bar.</p>
    </div>

    <hr>
    <h3>Dragable</h3>
    <script>
        function DragHandler(target, e) {
            e.dataTransfer.setData('Text', target.id);
        }
        function DropHandler(target, e) {
            var id = e.dataTransfer.getData('Text');
            target.appendChild(document.getElementById(id));
            e.preventDefault();
        }
    </script>

    <div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false" class="dndbox" style="width:400px;heigh:90px; display: inline-block;">
        <img src="img/album/1.jpg" id="club" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
        <img src="img/album/2.jpg" id="heart" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
        <img src="img/album/3.jpg" id="spade" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
        <img src="img/album/4.jpg" id="diamond" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
    </div>
    <div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false" class="dndbox" style="width:400px;height:90px; display: inline-block; border: 2px solid #ccc;padding: 10px;"></div>
    <div id="demonotes">Drag and drop images from one container to another. Works in all major browsers except Opera.</div>

    <hr>
    <h3>localStorage</h3>
    <p>You Have Viewed This Page <b>
        <script>
            if (!localStorage.pageCounter)
                localStorage.setItem('pageCounter',0);
            localStorage.setItem('pageCounter',parseInt(localStorage.pageCounter)+1);
            document.write(localStorage.pageCounter);
        </script>
    </b> Time(s).</p>
    <p>
        <input value="Clear localStorage" type="button" onClick="localStorage.clear();location.reload(true);">
        <input value="Reload Page" type="button" onClick="location.reload(true);">
    </p>

    <hr>
    <h3>localStorage</h3>
    <input type="text" x-webkit-speech >
     

</section>

<footer id="footer"></footer>

<a id="j_BackToTop" class="back_to_top" href="javascript:void(0)"><em></em></a>
<script src="js/public/jquery-1.9.0.min.js"></script>
<script src="js/public/globle.js"></script>
</body>
</html>